<template>
  <div class="main-layout">
    <el-card class="box-card-list" shadow="never">
      <div class="reservePage-layout">
        <div class="left">
          <el-affix :offset="200">
            <Left @update:SearchData="searchCounselor" />
          </el-affix>
        </div>
        <div class="divider"></div>

        <div class="right">
          <RightList v-if="state.rightPageType === 'list'" :SearchData="state.searchListData" @GoDetail="goDetail" />
          <ListDetails v-else-if="state.rightPageType === 'detail'" :ShowDetailData="state.showDetailData"
            @GoList="goList" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import Left from "./components/leftOptions.vue"
import RightList from "./components/lists.vue"
import ListDetails from "./components/details.vue"
import type { QueryParams, UserCounselorData } from '@/api/counselor/types'

const route = useRoute()

// 页面状态管理
const state = reactive({
  searchListData: {} as QueryParams,
  showDetailData: {
    data: {
      user_id: route.query.user_id?.toString() || "",
      name: "",
      level: "",
      workplace: "",
      address: "",
      mobile: "",
      email: "",
      tag: "",
      avatar: ""
    } as UserCounselorData,
    fromWhere:(route.query.fromWhere as string) || "reservePage"
  },
  rightPageType: route.query.type || 'list',
})

// 处理左侧搜索
const searchCounselor = (data: QueryParams) => {
  state.rightPageType = 'list'
  state.searchListData = data
}

// 处理列表项点击，显示详情
const goDetail = (data: UserCounselorData) => {
  state.rightPageType = 'detail'
  state.showDetailData.data = data
}

// 从详情返回列表
const goList = () => {
  state.rightPageType = 'list'
}
</script>

<style scoped>
.reservePage-layout {
  display: flex;
  width: 100%;
}

.divider {
  width: 2px;
  background-color: #eee;
  margin: 0 20px;
  min-height: 750px;
}

.left {
  flex: 1;
  min-width: 300px;
}

.right {
  flex: 3;
  min-width: 600px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .reservePage-layout {
    flex-direction: column;
  }

  .divider {
    width: 100%;
    height: 2px;
    margin: 20px 0;
    min-height: 0;
  }

  .left, .right {
    width: 100%;
    min-width: auto;
  }
}
</style>
